<template>
  <div class="setPin">
    <PageHeader :lang="lang"></PageHeader>
    <!--设置PIN-->
    <div class="pageBody" id="pageBody" @keyup.13="eventshow($event)">

      <!-- 右侧部分 -->
      <div class="pinMain">
        <div class="list">
          <div class="mainTitle">
            <h3>{{lang['setting fund password']}} 
              <img src="../../assets/images/user/hide_password.png" @click="show = !show" v-show="show">
              <img src="../../assets/images/user/show_password.png" @click="show = !show" v-show="!show">
              </h3>
            <p>{{lang['For your security, please set a PIN']}}</p>
          </div>

           <Pin :lang="lang" @PIN="setPin" :show="show" :isFocus="true"></Pin>

          <!--  <div class="tip">{{this.lang['register_passwordHint Asset']}}</div> -->

           <div class="title">
              <label>{{lang['confirmation PIN code']}}</label>
            </div>

          <Pin :lang="lang" @PIN="setPinconfirm" :show="show" :isFocus='false'></Pin>
          <!--   <div class="tip">{{this.lang['register_passwordHint Asset']}}</div> -->

          <div class="title">
            <button type="button" class="submitBtn" v-bind:class="{ active: !isSubmitBtnCheck }"   @click="mony_show">
              {{lang['set up immediately']}}
            </button>
          </div>


        </div>
      </div>
    </div>

    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import ModalApi from '@/components/SwModal/api.js'
import { mapActions } from 'vuex'
import LoginService from '@/service/LoginService.js'
import Utils from '@/utils/Utils.js'
import Pin from './components/pin.vue'

export default {
  mixins: [commonMixins],
  data () {
    return {
      showModal: false,
      password: '',
      password2: '',
      isSubmitBtnCheck: true,
      show: true
    }
  },
  components: {
    Pin
  },
  methods: {
    ...mapActions(['saveUserInfo']),
    onlyNumber (event, modelName) {
      Utils.onlyNumber(event.target, (val) => {
        this[modelName] = val
      })
    },
    eventshow (ev) {
      if (ev.keyCode === 13) {
        this.mony_show()
      }
    },
    mony_show () {
      if (!this.isSubmitBtnCheck) {
        return
      }

      if (!this.password) {
        ModalApi.message(this.lang['Please setting fund password'], null, null, 'pinModal') // '请设置PIN
        return
      }

      if (this.password.length !== 6) {
        ModalApi.message(this.lang['register_passwordHint Asset'], null, null, 'pinModal') //  // '请输入6位数字'
        return
      }
      if (!this.password2) {
        ModalApi.message(this.lang['register_PleaseconfirmPassword PIN password'], null, null, 'pinModal') // 请输入确认 PIN
        return
      }
      if (this.password !== this.password2) {
        ModalApi.message(this.lang['pin settings are inconsistent'], null, null, 'pinModal') // 'PIN设置不一致'
        return
      }
      this.isSubmitBtnCheck = false
      LoginService.setPIN({
        pwd: this.password
      }).then((res) => {
        this.isSubmitBtnCheck = true
        if (res.isOk) {
          this.password = ''
          this.password2 = ''

          ModalApi.message(this.lang['fund cipher setting'], 1500, () => {
            // 登录了且没有设置PIN（刚设置完PIN）且有登录验证，要跳回去。这种状态只有发生在忘记PIN让客服清除并已设置过登录验证的情况
            if (LoginService.getLoginState() === 'needVerify') {
              this.$router.push({path: '/user/login', query: {needVerify: true}})
            } else {
              LoginService.checkIn()
              // 设置完PIN就去安全中心页
              this.$router.replace({path: '/trading'})
            }
          })
        }
      })
    },
    setPin (res) {
      this.password = res
    },

    setPinconfirm (res) {
      this.password2 = res
    },
    monyBtndetermine () {
      this.showModal = false
    }
  },
  mounted () {
    let loginState = LoginService.getLoginState()

    // 未提交过登录则回去登录
    if (loginState === 'needSubmit') {
      this.$router.replace({path: '/user/login'})
    }

    // 需要验证则回去登录页验证
    if (loginState === 'needVerify') {
      this.$router.replace({path: '/user/login'})
    }

    // 若已登录则跳去个人中心
    if (loginState === 'logged') {
      this.$router.replace({path: '/trading'})
    }
  }
}
</script>

<style lang="less">
.pinModal { margin-top: -130px;}
.setPin{
  background-image: url(../../assets/images/user/background.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: #14141c;

  .pinMain {
    margin:125px auto;
    width:424px;
    background: #112135;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
    border-radius: 10px;
  }

  .list{
    width: 300px;
    padding: 30px 0;
    margin: 0 auto;

    .mainTitle{
      padding-top: 30px;
      text-align: left;
      h3{
        position: relative;
        font-size: 16px;
        color: #fff;

        img {
          position: absolute;
          right: 0;
          cursor: pointer;
        }
      }
      p{
        color: rgba(255,255,255,.5);
        padding-top: 10px;
        padding-bottom: 10px;
        font-size: 12px;
      }
    }

    .title {
      margin-top: 30px;
      label{
        display: block;
        padding: 15px 0 5px;
        height: 20px;
        line-height: 20px;
        color: #fff;
      }
    }
    .tip {
      color: #999;
      padding-top: 6px;
    }
    .submitBtn {
      width: 100%;
      display: block;
      height: 40px;
      line-height: 40px;
      margin: 60px auto 0;
      text-align: center;
      background: #3379EB;
      color: #fff;
      font-size: 18px;
      border-radius: 2px;
      cursor: pointer;

      &.active{
        background-color: #ccc;
      }
    }


  }
}

</style>
